<template>
  <div class="cart-con-list pad-t-26">
    <!-- 内容列表 -->
    <div class="tab-container">
      <div v-loading="listLoading" element-loading-text="加载中" element-loading-background="#ffffff"
        class="c-table buy-table">
        <div class="pad-l-20 pad-r-20 pad-b-20">
          <div class="c-table__head">
            <div class="c-table__td flex-item" style="width: 340px">
              <div class="flex v-align-c">
                <div class="pad-g-t">商品</div>
              </div>
            </div>
            <div class="c-table__td" style="width: 212px">规格</div>
            <div class="c-table__td" style="width: 216px"><span class="pad-l-2">价格</span></div>
            <div class="c-table__td" style="width: 214px">重量</div>
            <div class="c-table__td" style="width: 211px">数量</div>
            <div class="c-table__td" style="width: 149px"><span class="pad-l-2">小计</span></div>
          </div>
          <div class="c-table__body mar-t--7">
            <div v-for="(itemShop, itemShopIndex) in orderCheckShopData.efficientShopList" :key="itemShopIndex"
              class="c-table__row">
              <div class="c-row__head">
                <div class="c-row__left">
                  <div class="c-table__td">
                    <div class="width-5" />
                    <div>
                      <span>{{itemShop.shopName}}</span>
                    </div>
                    <div class="mar-l-12">
                      <span class="tag-city" v-if="itemShop.areaName">{{itemShop.areaName}}</span>
                    </div>
                  </div>
                </div>
                <div class="c-row__right">&nbsp;</div>
              </div>
              <div class="c-table__container">
                <div v-for="(itemGoods, itemGoodsIndex) in itemShop.goodsResponseList" :key="itemGoodsIndex"
                  class="c-table__tr align-td-t font-12">
                  <div class="c-table__td flex-item flex v-align-t align-td-t mar-t--3" style="width: 340px">
                    <div class="width-5" />
                    <img :src="itemGoods.imageUrl" alt="" class="width-80 height-80 mar-r-11">
                    <div class="mar-t--3" style="width: 190px">
                      <div class="_line-1">{{itemGoods.title}}</div>
                      <div class="font-color-6 pad-t-4" v-if="itemGoods.goodsCode">货号：{{itemGoods.goodsCode}}</div>
                    </div>
                  </div>
                  <div class="c-table__td font-color-6" style="width: 212px">{{itemGoods.skuDetail}}</div>
                  <div class="c-table__td font-color-6" style="width: 216px">
                    <div>
                      <div>￥{{itemGoods.distributePrice}}</div>
                      <!-- <div class="tag-11">闪电发货</div> -->
                    </div>
                  </div>
                  <div class="c-table__td font-color-6" style="width: 214px">{{itemGoods.weight}}</div>
                  <div class="c-table__td" style="width: 211px">{{itemGoods.goodsNum}}</div>
                  <div class="c-table__td font-color-3 font-14 font-w" style="width: 149px">￥{{itemGoods.subTotal}}
                  </div>
                </div>
              </div>
              <div class="c-row__footer align-r height-48 pad-r-24">
                <div class="flex v-align-c">
                  <span>{{itemShop.areaName}}订单：</span>
                  <span class="font-18 font-w font-price-00B">{{itemShop.totalGoodsNum}}</span>
                  <span class="pad-r-26 pad-l-5">件</span>
                  <span>运费：</span>
                  <span class="font-20 font-w font-price-00B">￥{{itemShop.postFee || 0.00}}</span>
                  <span>合计：</span>
                  <span class="font-20 font-w font-price-00B">￥{{itemShop.totalPayableAmount}}</span>
                </div>
              </div>
            </div>
            <div v-for="(itemShop, itemShopIndex) in orderCheckShopData.invalidShopList" :key="itemShopIndex"
              class="c-table__row">
              <div class="c-row__head">
                <div class="c-row__left">
                  <div class="c-table__td">
                    <div class="width-5" />
                    <div>
                      <span>{{itemShop.shopName}}</span>
                    </div>
                    <div class="mar-l-12">
                      <span class="tag-city" v-if="itemShop.areaName">{{itemShop.areaName}}</span>
                    </div>
                  </div>
                </div>
                <div class="c-row__right">&nbsp;</div>
              </div>
              <div class="c-table__container">
                <div v-for="(itemGoods, itemGoodsIndex) in itemShop.goodsResponseList" :key="itemGoodsIndex"
                  class="c-table__tr align-td-t font-12">
                  <div class="c-table__td flex-item flex v-align-t align-td-t mar-t--3" style="width: 340px">
                    <div class="width-5" />
                    <img :src="itemGoods.imageUrl" alt="" class="width-80 height-80 mar-r-11">
                    <div class="mar-t--3" style="width: 190px">
                      <div class="_line-1">{{itemGoods.title}}</div>
                      <div class="font-color-6 pad-t-4" v-if="itemGoods.goodsCode">货号：{{itemGoods.goodsCode}}</div>
                      <div class="font-color-6 pad-t-4" v-if="itemGoods.remark" style="color: red;">
                        无效原因：{{itemGoods.remark}}</div>
                    </div>
                  </div>
                  <div class="c-table__td font-color-6" style="width: 212px">{{itemGoods.skuDetail}}</div>
                  <div class="c-table__td font-color-6" style="width: 216px">
                    <div>
                      <div>￥{{itemGoods.distributePrice}}</div>
                      <!-- <div class="tag-11">闪电发货</div> -->
                    </div>
                  </div>
                  <div class="c-table__td font-color-6" style="width: 214px">{{itemGoods.weight}}</div>
                  <div class="c-table__td" style="width: 211px">{{itemGoods.goodsNum}}</div>
                  <div class="c-table__td font-color-3 font-14 font-w" style="width: 149px">￥{{itemGoods.subTotal}}
                  </div>
                </div>
              </div>
              <div class="c-row__footer align-r height-48 pad-r-24">
                <div class="flex v-align-c">
                  <span>{{itemShop.areaName}}订单：</span>
                  <span class="font-18 font-w font-price-00B">{{itemShop.totalGoodsNum}}</span>
                  <span class="pad-r-26 pad-l-5">件</span>
                  <span>合计：</span>
                  <span class="font-20 font-w font-price-00B">￥{{itemShop.totalPayableAmount}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import {
    defineComponent,
    ref,
    onMounted,
    watch
  } from 'vue'
  export default defineComponent({
    name: 'CartList',
    props: {
      pOrderCheckShopData: Object
    },
    setup(props) {
      const orderCheckShopData = ref( < any > [])
      const listLoading = ref(true)
      onMounted(() => {})

      watch(() => props.pOrderCheckShopData, (newVal, oldVal) => {
        listLoading.value = false
        orderCheckShopData.value = newVal
      }, {
        deep: true
      })

      return {
        orderCheckShopData,
        listLoading
      }
    }
  })
</script>

<style lang="scss" scoped>
  $darkBlue: #182245;
  $detailWidth: 100%;
  $recommendGoodsWidth: 190px;

  .cart-con-list {
    .pad-g-t {
      padding-left: 63px;
    }

    .tag-city {
      background: $darkBlue;
      color: #fff;
      height: 18px;
      line-height: 18px;
      display: inline-block;
      padding: 0 5px;
    }

    ._line-1 {
      /* line-height: 1.4; */
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      word-break: break-word;
    }

    .tag-11 {
      border: #ff7300 1px solid;
      color: #ff7300;
      padding: 0 2px;
    }

    ::v-deep(.remove-btn) {
      &.el-button {
        min-height: 30px;
        padding: 0px 9px;
        border-radius: 2px;
        color: #323233;
      }
    }

    ::v-deep(.submit-btn) {
      &.el-button {
        color: #ffffff;
        background: #ff500b;
        padding: 0px 0px;
        min-height: 66px;
        width: 160px;
        font-size: 20px;
        font-weight: bold;
        border-radius: 0;
        border: none;

        &.disabled {
          color: #ffffff;
          background: #dddddd;
        }
      }
    }

    ::v-deep(.remove-btn-t) {
      &.el-button {
        color: #666666;
        padding: 0px 0px;
        min-height: auto;
        font-size: 12px;
        margin-top: 3px;
      }
    }

    ::v-deep(.input-number) {
      &.disabled {

        .el-input-number__decrease,
        .el-input-number__increase {
          background: #f5f7fa;
        }
      }

      &.el-input-number {
        width: 102px;
        line-height: 26px;
      }

      .el-input-number__decrease {
        border-right: #eeeeee 1px solid !important;
      }

      .el-input-number__increase {
        border-left: #eeeeee 1px solid !important;
      }

      .el-input-number__decrease,
      .el-input-number__increase {
        position: absolute;
        z-index: 1;
        top: 1px;
        width: 25px;
        height: auto;
        text-align: center;
        background: #ffffff;
        color: #464646;
        font-size: 13px;
        border-right: 0;
        line-height: 24px;
      }

      .el-input {
        line-height: 26px;
        border-right: 0;
        --el-input-border-radius: 0;
      }

      .el-input__inner {
        border-right: 0;
        height: 26px;
        line-height: 26px;
        padding: 0 15px;
        padding-left: 23px;
        padding-right: 23px;
        border: #eeeeee 1px solid;
      }
    }

    .submit-top {
      padding-top: 40px;
      padding-bottom: 28px;
      background: #f5f5f5;
    }
  }
</style>
